<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>D站</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="icon" th:href="@{/pagesResource/img/icon.png}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/animate.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/bootstrap-switch.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/iconfont.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/style.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/responsive.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/color.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/video-js.css}">
    <script type="text/javascript" th:src="@{/pagesResource/js/video.js}"></script>
    <style type="text/css">
        /*使用透明的方式去除边框线*/
        td{border: 1px solid transparent !important;}
    </style>
</head>
<body>
<div class="wrapper">
    <div th:include="main/simpleHeader :: header"></div>
</div>
<section class="mn-sec">
    <div class="container" style="max-width: 922px;">
        <div>
            <div>
                <div class="mn-vid-sc single_video">
                    <div class="vid-1">
                        <div class="vid-pr">
                            <div style="width: 100%; height: 100%">
                                <video
                                        id="my-player"
                                        controls="true"
                                        autoplay=false
                                        preload="auto"
                                        aspectRatio="16:9"
                                        class="video-js vjs-default-skin vjs-big-play-centered vjs-fluid"
                                        data-setup='{}'
                                        th:poster="@{/video/getVideoCoverageImg/} + '?videoCoverImg=' + ${videoInfo.videoCoverImg}"
                                        style="width: 100%; height: 100%"
                                >
                                </video>
                                <div class="send_danmu_bar row">
                                    <div class="col-md-4">
                                        弹幕开关：&nbsp;&nbsp;
                                        <div class="switch">
                                            <input type="checkbox" name="switch">
                                        </div>
                                    </div>
                                    <div class="col-md-8">
                                        <div class="input-group">
                                            <input type="text" id="bulletchatContent" class="form-control" maxlength="100" placeholder="快来表达你的想法叭">
                                            <span class="input-group-btn">
                                                <button class="btn btn-info" type="button" onclick="send()">发送</button>
                                            </span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div id="bulletchat" class="flying" style="pointer-events:none;"></div>
                        <div class="videoButtons row">
                            <ul class="pr_links col-md-6">
                                <li>
                                    <button data-toggle="tooltip" data-placement="top" title=""
                                            data-original-title="为这个视频点赞吧"
                                            th:onclick="'praise(' + ${videoInfo.videoId} +')'">
                                        <span th:if="${isPraise} == 1" id="praiseIcon"
                                              class="iconfont icon-dianzan alive"></span>
                                        <span th:if="${isPraise} == 0" id="praiseIcon"
                                              class="iconfont icon-dianzan "></span>
                                    </button>
                                    <span class="video_data" id="praiseNum" th:text="${videoInfo.likedNum}"></span>
                                </li>
                                <li>
                                    <button data-toggle="tooltip" data-placement="top" title=""
                                            data-original-title="为这个视频投币吧"
                                            th:onclick="'operateCoin(' + ${session.userInfo?.userId} +','+ ${videoInfo.videoId} +')'">
                                        <span th:if="${isOperateCoin} == 1" id="operateCoinIcon"
                                              class="iconfont icon-toubi alive"></span>
                                        <span th:if="${isOperateCoin} == 0" id="operateCoinIcon"
                                              class="iconfont icon-toubi"></span>
                                    </button>
                                    <span class="video_data" id="coinNum" th:text="${coinNum}"></span>
                                </li>
                                <li>
                                    <button data-toggle="tooltip" data-placement="top" title=""
                                            data-original-title="收藏这个视频吧"
                                            th:onclick="'collectVideo(' + ${videoInfo.videoId} +')'">
                                        <span th:if="${isCollect} == 1" id="collectVideoIcon"
                                              class="iconfont icon-shoucang alive"></span>
                                        <span th:if="${isCollect} == 0" id="collectVideoIcon"
                                              class="iconfont icon-shoucang"></span>
                                    </button>
                                </li>
                                <li>
                                    <a class="bind_hover_card" data-toggle="popover" data-placement="bottom"
                                       data-trigger="manual">
                                        <span id="shareVideo" class="iconfont icon-zhuanfa"></span>
                                    </a>
                                </li>
                            </ul>
                            <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
                                 aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal"
                                                    aria-hidden="true">×
                                            </button>
                                            <h4 class="modal-title">分享到微信朋友圈</h4>
                                        </div>
                                        <div class="modal-body">
                                            <div id="wx-img"></div>
                                        </div>
                                        <div class="modal-footer">
                                            <div>打开微信，使用“扫一扫”即可将网页分享至朋友圈或朋友。</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="info-pr-sec col-md-6">
                                <div class="vcp_inf cr">
                                    <div class="vc_hd">
                                        <img th:src="@{/images/userIcon/} + ${videoInfo.userIcon}" alt=""
                                             th:onclick="'userMainPage(' + ${videoInfo.userId} +')'">
                                    </div>
                                    <div class="vc_info pr">
                                        <h4><a href="#" title="" th:text="${videoInfo.userName}"> 盗月社食遇记 </a></h4>
                                        <span th:text="${videoInfo.userSignature}">心里有光，哪儿都美。</span>
                                    </div>
                                </div>
                                <ul class="chan_cantrz">
                                    <li th:onclick="'notice(' + ${videoInfo.userId} +')'">
                                        <a href="javascript:void(0);" title="" class="donate" id="noticeButton"
                                           th:if="${isNoticed} == 0"> 关注 </a>
                                        <a href="javascript:void(0);" title="" class="subscribe" id="noticeButton"
                                           th:if="${isNoticed} == 1"> 取消关注 </a>
                                    </li>
                                    <!-- li>
                                        <a href="#" title="" class="subscribe">取关</a>
                                    </li> -->
                                </ul>
                            </div>
                        </div>
                        <div class="vid-info">
                            <h3 id="vid-title" th:text="${videoInfo.videoTitle}">网抑云终结者：重庆小学生！我笑得鼻涕都出来了！</h3>
                            <div class="info-pr">
                                <span th:text="${videoInfo.videoViewNum} + '次播放'">255.7万播放</span>
                                <br>
                                <span th:text="'发布时间:' + ${#dates.format(videoInfo.createDate, 'yyyy-MM-dd')}">255.7万播放 发布时间：2020-12-25 20:57:39</span>
                                <div class="clearfix"></div>
                            </div>
                        </div>

                        <div class="abt-mk row">
                            <div class="about-ch-sec col-md-6">
                                <div class="abt-rw">
                                    <h4>简介 : </h4>
                                    <p id="vid-description" th:text="${videoInfo.videoDescription}">
                                        如果喜欢这期视频，请给我们点个赞吧！
                                    </p>
                                </div>
                                <div class="abt-rw tgs">
                                    <h4>标签 : </h4>
                                    <ul>
                                        <li th:each="labelInfo:${labelInfoList}" th:utext="'<span>'+ '#' + ${labelInfo.tagName} +'</span>'"></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <br>
                        <h3> 用户评论 ></h3>
                        <br>
                        <br>
                        <div th:if="${commentInfoList}== null" class="form-group" style="height: 200px; box-shadow: 10px 10px 5px #888; background-image: url('/images/sysImages/comment_no_user.png');background-repeat: no-repeat;
                                        text-align: center">
                            <h2>期待你的评论~</h2>
                        </div>
                        <br>
                        <div class="form-group">
                            <label class="col-sm-1 control-label">评论:</label>
                            <div class="col-sm-10">
                                <textarea type="text" name="commentTxt" id="commentTxt" class="form-control" placeholder="发表您的评论"></textarea>
                            </div>
                            <!-- 这里的preCommentId为0，代表这是一级评论 -->
                            <button class="btn btn-primary" th:onclick="'publicComment(' + ${videoInfo.videoId} + ',0)'" name="commentButton" id="commentButton" style="margin-bottom: 0px">发表</button>
                        </div>
                        <div class="form-group" style="box-shadow: 10px 10px 5px #888" th:if="${commentInfoList}!= null">
                            <table class="table">
                                <tbody>
                                    <tr class="row" style="height: 80px" th:each="commentInfo:${commentInfoList}" th:if="${commentInfo.preCommentId eq 0}">
                                        <td class="col-lg-1">
                                            <img th:src="@{/images/userIcon/{userIc}(userIc=${commentInfo.userIcon})}" style="height: 50px; width: 50px;border-radius: 50%;"
                                                 th:onclick="'userMainPage(' + ${commentInfo.userId} +')'">    <!-- 头像 -->
                                        </td>
                                        <td class="col-lg-9">
                                            <th:block th:text="${commentInfo.userName}">张三</th:block>
                                            <br>
                                            <br>
                                            <th:block th:text="${commentInfo.commentContent}">太搞笑了！</th:block>
                                            <br>
                                            <br>
                                            <div style="height: 80px" th:each="sonCommentInfo:${commentInfoList}" th:if="${sonCommentInfo.preCommentId eq commentInfo.videoCommentId}">
                                                <div class="col-lg-1">
                                                    <img th:src="@{/images/userIcon/{userIc}(userIc=${sonCommentInfo.userIcon})}" style="height: 50px; width: 50px;border-radius: 50%;"
                                                         th:onclick="'userMainPage(' + ${sonCommentInfo.userId} +')'">    <!-- 头像 -->
                                                </div>
                                                <div class="col-lg-9">
                                                    <th:block th:text="${sonCommentInfo.userName}">张三</th:block>
                                                    <br>
                                                    <th:block th:text="${sonCommentInfo.commentContent}">太搞笑了！</th:block>
                                                </div>
                                                <div >
                                                     <span style="float: right; margin-right: 20px; font-size: smaller">
                                                    <th:block th:text="'回复于:' + ${#dates.format(sonCommentInfo.createDate, 'yyyy-MM-dd')}">2020-12-9</th:block>
                                                </span>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="col-lg-2">
                                            <div class="row">
                                                <!--<img class="col-sm-8" src="/images/userIcon/default.jpg" style="height: 30px; width: 200px">-->
                                                <u th:onclick="replyComment([[${commentInfo.videoId}]],[[${commentInfo.videoCommentId}]],[[${commentInfo.userName}]])" style="float: right; margin-right: 20px; color: #1ab7ea">回复</u>
                                                <br>
                                                <br>
                                                <span style="float: right; margin-right: 20px; font-size: smaller">
                                                    <th:block th:text="'发表于:' + ${#dates.format(commentInfo.createDate, 'yyyy-MM-dd')}">2020-12-9</th:block>
                                                </span>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- 回复框 -->
                        <div class="form-group" id="replyCommentDiv" hidden="hidden" style="position: sticky">
                            <!-- 视频ID -->
                            <input id="replyCommentVideoId" hidden="hidden">
                            <!-- 记录回复的评论ID -->
                            <input id="replyCommentId" hidden="hidden">
                            <label class="col-sm-1 control-label">
                                <img th:src="@{/images/userIcon/{userIc}(userIc=${session.userInfo.userIcon})}" style="width: 57px; height: 60px">
                            </label>
                            <h3 id="replyCommentTitle">回复张三: </h3>
                            <br>
                            <div class="col-sm-10">
                                <textarea type="text" name="replyCommentTxt" id="replyCommentTxt" class="form-control" placeholder="回复内容...."></textarea>
                            </div>
                            <!-- 这里的preCommentId为0，代表这是一级评论 -->
                            <button class="btn btn-primary" onclick="submitReplyComment()" name="replyCommentButton" id="replyCommentButton" style="margin-bottom: 0px">回复</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<script th:src="@{/js/sweetAlert.js}"></script>
<script th:src="@{/pagesResource/js/jquery.min.js}"></script>
<script th:src="@{/pagesResource/js/popper.js}"></script>
<script th:src="@{/pagesResource/js/bootstrap.min.js}"></script>
<script th:src="@{/pagesResource/js/bootstrap-switch.js}"></script>
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script th:src="@{/pagesResource/js/jquery.danmu.min.js}"></script>
<script th:src="@{/pagesResource/js/script.js}"></script>
<script type="text/javascript">
    /**
     * 播放器所在容器
     * */
    var videoURL = "[[@{/video/getVideoByVideoURL/} + '?videoURL=' + ${videoInfo.videoURL}]]";
    var myPlayer = videojs('my-player');
    var isObtain = true;
    var videoId = [[${videoInfo.videoId}]];
    myPlayer.ready(function () {
        var myPlayer = this;
        myPlayer.src(videoURL);
        myPlayer.load(videoURL);
        myPlayer.play();
        //设置弹幕属性
        $("#bulletchat").danmu({
                left: $('.vid-pr').offset().left ,//区域的左边边界位置，相对于父div
                top: $('.vid-pr').offset().top-100,//区域的上边边界位置，相对于父div
                height: $(".vid-pr").height(),//区域的高度
                width: $("#my-player").width(),//区域的宽度
                zindex: 100,//div的css样式zindex
                speed: 7500,//弹幕速度，飞过区域的毫秒数
                default_font_color: "#FFFFFF", //弹幕默认字体颜色
                opacity: 1,//弹幕默认透明度
                font_size_small: 16,//小号弹幕的字体大小,注意此属性值只能是整数
                font_size_big: 24,//大号弹幕的字体大小
                top_botton_danmu_time: 6000//顶端底端弹幕持续时间
            }
        );
        myPlayer.on("play", function () {
            //设置弹幕出发的起始位置
            $("#bulletchat").height($('.vid-pr').offset().top + $(".vid-pr").height() - 200);
            $("#bulletchat").width($("#my-player").width());
            //从服务器获取弹幕信息
            if (isObtain) {
                $.ajax(
                    {
                        type: "GET",
                        url: "/bulletChat/queryBulletChatInfo",
                        async: false,
                        cache: true,
                        data: {
                            "videoId": videoId
                        },
                        success: function (data) {
                            if (data != null) {
                                var result =eval(data);
                                //添加弹幕信息
                                $('#bulletchat').danmu("addDanmu", result);
                            } else {
                                swal("提示", "还没人发没有弹幕", "info");
                            }
                        },
                        error: function (data) {
                            swal("Error", "网络错误，请联系管理员！", "error");
                        }
                    }
                );
                isObtain = false;//保证只获取一次，不会应该视频的重新播放再次去获取数据，造成弹幕重复
            }
            //设置弹幕与视频同步
            var whereYouAt = myPlayer.currentTime();
            console.log(whereYouAt);
            $('#bulletchat').danmu("setTime", Math.floor(whereYouAt * 10));

            // $("#danmu").danmu("danmuStart");
            $('#bulletchat').danmu('danmuResume');
        });
        myPlayer.on("pause", function () {
            //暂停播放时，停止弹幕
            $('#bulletchat').danmu('danmuPause');
        });
        myPlayer.on("progress", function () {
            console.log("客户端正在请求数据");
        })
    });

    //发送弹幕
    function send() {
//        var color = document.getElementById('color').value;
//        var position = document.getElementById('position').value;
//        var size = document.getElementById('text_size').value;
        var whereYouAt = myPlayer.currentTime();
        var text = document.getElementById('bulletchatContent').value;
        // var time = Math.floor(whereYouAt * 10);//$('#danmu').data("nowTime") + 5;
        var time = $('#bulletchat').data("nowTime")+ 5;
        var color = "#FFFFFF";
        var position = "0";
        var size = "1";
        console.log(time);
        if (text != "") {
            //将弹幕消息发送到后端，存到数据库中
            $.ajax(
                {
                    type: "POST",
                    url: "/bulletChat/saveBulletChatInfo",
                    async: false,
                    cache: true,
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify({
                        "videoId": videoId,
                        "damuInfo": {
                            "text": text,
                            "color": '#fffff',
                            "size": size,
                            "position": position,
                            "time": time
                        }
                    }),
                    success: function (data) {
                        if (data == "success") {
                            $('#bulletchat').danmu("addDanmu",
                                {text: text, color: color, size: size, position: position, time: time, isnew: ""});
                        }
                    },
                    error: function (data) {
                        swal("Error", "网络错误，请联系管理员！", "error");
                    }
                }
            );
        }
        document.getElementById('bulletchatContent').value = '';
    }
    $('[name="switch"]').bootstrapSwitch({
        onText: "开",
        offText: "关",
        onColor: "success", // 设置ON文本颜色(info/success/warning/danger/primary)
        offColor: "info", // 设置OFF文本颜色(info/success/warning/danger/primary)
        size: "small", // 设置控件大小,从小到大 (mini/small/normal/large)
        state:true,
        onSwitchChange: function (event, state) {
            if (state == true) {
                jQuery('#bulletchat').data("opacity", 1);
                jQuery(".flying").css({
                    "opacity": 1
                });
            } else {
                jQuery('#bulletchat').data("opacity", 0);
                jQuery(".flying").css({
                    "opacity": 0
                });
            }
        }
    })
    // function changehide() {
    //     // 通过透明度控制是否显示弹幕
    //     if (document.getElementById("ishide").checked) {
    //         jQuery('#bulletchat').data("opacity", 1);
    //         jQuery(".flying").css({
    //             "opacity": 1
    //         });
    //     } else {
    //         jQuery('#bulletchat').data("opacity", 0);
    //         jQuery(".flying").css({
    //             "opacity": 0
    //         });
    //     }
    // }

    // function settime() {
    //     var t = document.getElementById("set_time").value;
    //     t = parseInt(t);
    //     console.log(t);
    //     $('#danmu').data("nowtime", t);
    // }

    /**
     * 定义去除前后空格的函数
     * @param str
     * @returns {void | string}
     */
    function trimBlank(str){
        if(str == null) {
            return "";
        }
        return str.replace(/(^\s+)|(^\s+$)/g,"")
    }

    /**
     * 发表评论
     * */
    function publicComment(videoId, preCommentId) {
        var commentTxt = $("#commentTxt").val();
        if(trimBlank(commentTxt) === "") {
            swal("Warning", "评论内容不能为空！", "warning");
            return ;
        }
        $.ajax(
            {
                type: "POST",
                url: "/videoComment/publicComment",
                async: false,
                cache: true,
                data: {
                    "videoId": videoId,
                    "commentTxt": commentTxt,
                    "preCommentId" :preCommentId
                },
                success: function (data) {
                    if(data["saveRes"] == true) {
                        swal("发表成功!", {
                            buttons: false,
                            timer: 1000
                        });
                        //刷新界面
                        window.location.reload();
                    } else {
                        swal("Error", "发表评论失败！", "error");
                    }
                },
                error: function (data) {
                    swal("Error", "网络错误，请联系管理员！", "error");
                }
            }
        );
    }

    /**
     * 点赞
     */
    function praise(videoId) {
        $.ajax(
            {
                type: "POST",
                url: "/video/praiseVideo",
                async: false,    //异步请求
                cache: true,
                data: {
                    "videoId": videoId
                },
                success: function (data) {
                    // 1. 更新 点赞icon 的样式
                    if(data["res"] == "add") {  //说明是点赞，修改点赞状态以及现在的点赞数量
                        $("#praiseIcon").attr("class", "iconfont icon-dianzan alive");
                    } else {
                        $("#praiseIcon").attr("class", "iconfont icon-dianzan");
                    }
                    //2. 更新现在的点赞数量
                    $("#praiseNum").text(data["praiseNum"]);
                },
                error: function (data) {
                    swal("Error", "网络错误，请联系管理员！", "error");
                }
            }
        );
    }
    /**
     * 收藏
     */
    function collectVideo(videoId) {

        $.ajax(
            {
                type: "GET",
                url: "/collect/collectVideo",
                async: true,
                cache: false,
                data: {
                    "videoId": videoId
                },
                success: function (data) {
                    if (data["isSave"] == true) {
                        swal("提示", "操作成功", "warning");

                    } else {

                        swal("提示", "操作失败", "warning")
                    }
                    setTimeout(function(){window.location.reload(); },1100);
                },
                error: function (data) {
                    swal("Error", "网络错误，请联系管理员！", "error");
                }
            }
        );
    }


    var isOperateCoin = [[${isOperateCoin}]];

    /**
     * 投币
     */
    function operateCoin(userId, videoId) {
        $.ajax(
            {
                type: "POST",
                url: "/video/saveCoinOperatedInfo",
                async: true,
                cache: false,
                data: {
                    "userId": userId,
                    "videoId": videoId,
                    "isOperateCoin": isOperateCoin
                },
                success: function (data) {
                    if (data["res"] == "lack") {
                        swal("提示", "你的硬币不足了哦，需要进行充值。", "warning");
                    } else if (data["res"] == "sub") {
                        $("#operateCoinIcon").removeClass("alive");
                        $("#coinNum").text(data["coinNum"]);
                        isOperateCoin = 0;
                    } else {
                        $("#operateCoinIcon").addClass("alive");
                        $("#coinNum").text(data["coinNum"]);
                        isOperateCoin = 1;
                    }
                },
                error: function (data) {
                    swal("Error", "网络错误，请联系管理员！", "error");
                }
            }
        );
    }

    //分享模拟框
    $(function () {
        $("[data-toggle='popover']").popover({
            trigger: 'manual',//manual 触发方式
            placement: 'bottom',
            title: '分享该动态给你的好友吧',
            html: 'true',
            content: function () {
                return content();
            },
            animation: false
        }).on("mouseenter", function () {
            var _this = this;
            $(this).popover("show");
            $(this).siblings(".popover").on("mouseleave", function () {
                $(_this).popover('hide');
            });
        }).on("mouseleave", function () {
            var _this = this;
            setTimeout(function () {
                if (!$(".popover:hover").length) {
                    $(_this).popover("hide")
                }
            }, 100);
        });
    });

    //加载内容
    function content() {
        var data = `<div class="share-btns">
                <div class="share-btn">
                    <!-- <input id="link_weixin" type="text" name=""> -->
        <a id="weixinShare" class="share-btn-icon" onclick="wxShare()" data-toggle="modal"
        data-target="#myModal">
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="20" fill="#57BB40"></circle>
        <path fill-rule="evenodd" clip-rule="evenodd"
        d="M19.7168 13.7118C19.0097 13.7118 18.4441 14.2616 18.4441 14.9491C18.4441 15.6366 19.0097 16.1864 19.7168 16.1864C20.424 16.1864 20.9896 15.6366 20.9896 14.9491C20.9896 14.2616 20.424 13.7118 19.7168 13.7118ZM13.6355 13.7118C12.9292 13.7118 12.3628 14.2616 12.3628 14.9491C12.3628 15.6366 12.9292 16.1864 13.6355 16.1864C14.3427 16.1864 14.909 15.6366 14.909 14.9491C14.909 14.2616 14.3427 13.7118 13.6355 13.7118ZM17.1724 22.9225C17.1724 23.61 17.314 24.2974 17.5964 24.8472H16.7484C15.7581 24.8472 14.6269 24.7104 13.6366 24.4351L10.1016 26.0845L10.9503 23.3347C8.68727 21.9605 7.27295 19.8982 7.27295 17.4236C7.27295 13.2996 11.5159 10 16.6068 10C21.273 10 25.0919 12.7498 25.7991 16.1863H25.0919C20.7074 16.1863 17.1724 19.2107 17.1724 22.9225ZM27.9199 19.8983C27.3543 19.8983 26.9296 20.3105 26.9296 20.8603C26.9296 21.4109 27.3543 21.8231 27.9199 21.8231C28.4855 21.8231 28.9102 21.4109 28.9102 20.8603C28.9102 20.3105 28.4855 19.8983 27.9199 19.8983ZM22.8285 19.8983C22.263 19.8983 21.839 20.3105 21.839 20.8603C21.839 21.4109 22.263 21.8231 22.8285 21.8231C23.3941 21.8231 23.8181 21.4109 23.8181 20.8603C23.8181 20.3105 23.3941 19.8983 22.8285 19.8983ZM29.7576 28.0091L30.4647 30.2083L27.9193 28.8342C27.0705 29.1087 26.2226 29.2464 25.233 29.2464C21.1308 29.2464 17.7374 26.4965 17.7374 23.06C17.7374 19.6235 21.1308 16.8737 25.233 16.8737C29.3336 16.8737 32.727 19.6235 32.727 23.06C32.727 24.9847 31.5966 26.7718 29.7576 28.0091Z"
        fill="white"></path>
        </svg>
        </a>
        <span class="share-btn-text">微信</span>
        </div>
        <div class="share-btn">
            <!-- <input id="link_qq" type="text" name=""> -->
        <a class="share-btn-icon" onclick="qq()">
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="20" fill="#4CA2E5"></circle>
        <path fill-rule="evenodd" clip-rule="evenodd"
        d="M29.0365 24.2657C28.9059 22.7032 28.0439 20.9636 27.6915 20.0894L26.7801 17.8395C26.7515 16.9025 27.0413 14.7516 25.5216 12.0594C23.9972 9.36651 20.9438 9.12432 20.3787 9.09627C19.8136 9.06821 16.2817 9.04089 14.5447 11.9715C12.8077 14.9015 13.277 17.8395 13.277 17.8395L12.3053 20.1049C12.3053 20.1049 11.8538 21.1393 11.4627 22.3968C11.0715 23.6543 10.6796 25.6317 11.0715 26.0334C11.4627 26.435 12.8804 24.194 13.011 23.9866C13.011 23.9866 13.1123 25.0565 13.3805 25.6177C13.5954 26.0659 14.1103 27.1845 15.1515 28.0617C14.6514 28.216 13.4509 28.6288 13.2739 29.0578C13.052 29.6027 13.4478 29.667 14.1242 29.7039C14.8006 29.7408 18.0426 29.8242 19.5964 29.6168C19.6134 29.6138 19.6273 29.6116 19.6443 29.6094C19.7966 29.6138 19.9388 29.6168 20.0764 29.6168C20.1638 29.6168 20.2651 29.6138 20.374 29.6116C20.3841 29.6138 20.3957 29.6138 20.4057 29.6168C21.9587 29.8242 25.2031 29.7408 25.8772 29.7039C26.5536 29.667 26.947 29.6027 26.7275 29.0578C26.5482 28.6214 25.3144 28.2042 24.829 28.0565C24.9805 27.9273 25.1281 27.7885 25.2734 27.6386C27.0243 25.8 26.8798 24.6393 26.9524 23.9747C26.9524 23.9747 28.4281 26.0075 28.7466 26.0769C29.0659 26.1463 29.1648 25.8274 29.0365 24.2657Z"
        fill="white"></path>
        </svg>
        </a>
        <span class="share-btn-text">QQ</span>
        </div>
        <div class="share-btn">
        <a class="share-btn-icon" onclick="qqZoneShare()">
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="20" fill="#F4BF41"></circle>
        <path fill-rule="evenodd" clip-rule="evenodd"
        d="M25.7608 17.8223L18.7132 22.8777C18.7132 22.8777 21.5417 23.2974 25.8074 23.2492L25.6134 22.4129L31.6916 17.147C31.8029 17.05 31.8457 16.8958 31.7999 16.7552C31.7547 16.6145 31.6291 16.5145 31.481 16.5025L23.4685 15.8143L20.3384 8.40576C20.2812 8.27038 20.1474 8.18164 20 8.18164C19.8526 8.18164 19.7187 8.27038 19.6615 8.40576L16.5307 15.8143L8.51822 16.5025C8.37081 16.5145 8.24522 16.6145 8.19934 16.7552C8.15422 16.8958 8.19708 17.05 8.30839 17.147L14.3866 22.4129L12.5651 30.2472C12.5312 30.3901 12.5869 30.5405 12.7065 30.6277C12.8268 30.7135 12.9862 30.7195 13.1133 30.6443L20 26.4906L26.8866 30.6443C26.9453 30.6811 27.0107 30.6969 27.0769 30.6969C27.1536 30.6969 27.2288 30.6744 27.2927 30.6277C27.4123 30.5405 27.4687 30.3901 27.4349 30.2472L25.9947 24.0517C26.6121 23.7411 27.2927 23.2154 27.2927 23.2154C27.2927 23.2154 24.5958 24.5323 14.9138 23.8885L21.9305 18.803C21.9305 18.803 21.6545 18.3736 12.8606 18.0675C12.2718 18.0472 20.0301 16.5965 25.7608 17.8223Z"
        fill="white"></path>
        </svg>
        </a>
        <span class="share-btn-text">QQ空间</span>
        </div>
        <div class="share-btn">
        <a class="share-btn-icon" onclick="sinaWeiBo()">
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="20" fill="#DB4437"></circle>
        <path fill-rule="evenodd" clip-rule="evenodd"
        d="M27.6183 16.703C27.2244 16.703 26.8309 16.3091 26.8309 15.9156C26.9618 14.9968 26.4369 14.078 25.3868 13.8157H24.9933C24.5993 13.8157 24.2058 13.4218 24.2058 13.0282C24.2058 12.6343 24.5993 12.2408 24.9933 12.2408C26.8309 12.2408 28.2745 13.6844 28.2745 15.5216V15.7842C28.2745 16.4404 28.0123 16.703 27.6183 16.703ZM17.6437 23.1338C17.3811 23.1338 17.2497 23.3965 17.2497 23.6591C17.2497 23.9213 17.5124 24.0526 17.6437 24.0526C17.7746 24.0526 18.0372 23.7904 18.0372 23.6591C18.1685 23.3965 17.9059 23.1338 17.6437 23.1338ZM15.4125 23.5278C14.7564 23.5278 14.2311 24.0526 14.2311 24.7088C14.2311 25.3654 14.7564 25.8902 15.4125 25.8902C16.0687 25.8902 16.5936 25.3654 16.5936 24.7088C16.5936 24.0526 16.0687 23.5278 15.4125 23.5278ZM17.5124 27.2026C15.4125 27.7274 13.3127 26.809 12.9188 24.9718C12.5252 23.1338 13.8376 21.4279 15.9374 20.9031C18.0372 20.3782 20.1371 21.2966 20.531 23.1338C20.9245 24.9718 19.6122 26.6777 17.5124 27.2026ZM16.9871 18.9342C13.0501 19.1968 9.90014 21.4279 10.0315 24.0526C10.1624 26.6777 13.5749 28.5149 17.5124 28.2527C21.4498 27.9901 24.5993 25.7593 24.4684 23.1338C24.3371 20.5091 20.9245 18.8029 16.9871 18.9342ZM24.4684 15.3907C26.1743 16.1782 25.1246 19.3281 25.1246 19.3281C26.0434 19.4594 26.8309 19.853 27.487 20.5091C29.3246 22.609 27.7496 27.0716 21.4498 29.1715C15.8061 31.0087 10.1624 29.1715 8.58779 25.6276C7.01283 21.8215 10.1624 16.0469 15.5435 13.0282C16.2 12.6343 18.2998 11.9781 19.4813 13.2909C20.1371 14.078 19.4813 16.3091 19.4813 16.3091C19.4813 16.3091 21.9746 14.2093 24.4684 15.3907ZM31.6871 16.703C31.6871 17.2283 31.1618 17.7531 30.637 17.7531C30.1121 17.7531 29.5869 17.2283 29.5869 16.703V16.5717C29.9804 13.947 28.1432 11.5846 25.5185 11.1907H24.862H24.731C24.2058 11.1907 23.6809 10.6658 23.6809 10.1409C23.6809 9.61606 24.2058 9.09082 24.731 9.09082H24.862C28.6681 9.09082 31.818 12.2408 31.818 16.0469V16.5717C31.6871 16.5717 31.6871 16.703 31.6871 16.703Z"
        fill="white"></path>
        </svg>
        </a>
        <span class="share-btn-text">微博</span>
        </div>
        <div class="share-btn">
        <a class="share-btn-icon" onclick="shareToTieba()">
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="20" cy="20" r="20" fill="#5582E7"></circle>
        <path fill-rule="evenodd" clip-rule="evenodd"
        d="M19.4525 10.18C19.4525 10.0806 19.3719 10 19.2725 10H12.43C11.0879 10 10 11.0879 10 12.43V24.6952C10 24.7946 10.0806 24.8752 10.18 24.8752H12.1687C12.2681 24.8752 12.3487 24.7946 12.3487 24.6952V12.3936H17.1492V24.6952C17.1492 24.7946 17.2298 24.8752 17.3292 24.8752H19.2725C19.3719 24.8752 19.4525 24.7946 19.4525 24.6952V10.18ZM22.791 10.18V18.9211H21.089C20.9895 18.9211 20.909 19.0017 20.909 19.1011V29.813C20.909 29.9125 20.9895 29.993 21.089 29.993H27.57C28.9121 29.993 30 28.9051 30 27.563V19.1011C30 19.0017 29.9194 18.9211 29.82 18.9211H25.0901V14.2177C25.0901 14.1183 25.1707 14.0377 25.2701 14.0377H29.82C29.9194 14.0377 30 13.9571 30 13.8577V11.7972C30 11.6978 29.9194 11.6172 29.82 11.6172H25.2701C25.1707 11.6172 25.0901 11.5366 25.0901 11.4372V10.18C25.0901 10.0806 25.0095 10 24.9101 10H22.971C22.8716 10 22.791 10.0806 22.791 10.18ZM27.6772 21.2751H23.2247V27.6576H27.6772V21.2751ZM13.7366 13.6401C13.6372 13.6401 13.5566 13.7193 13.5566 13.8187V23.4181C13.5566 26.8874 10 27.6805 10 27.6805V29.993C10 29.993 12.5302 30.1366 14.7262 27.3201C16.2314 29.7651 19.4525 29.993 19.4525 29.993C19.4525 29.993 19.4574 27.7087 19.4525 27.6805C15.5546 27.0698 15.9039 23.466 15.9096 23.4181V13.8191C15.9096 13.7197 15.829 13.6401 15.7296 13.6401H13.7366Z"
        fill="white"></path>
        </svg>
        </a>
        <span class="share-btn-text">贴吧</span>
        </div>
        </div>`;
        var html = htmlEncodeByRegExp(data);
        return htmlDecodeByRegExp(html);
     }

    /*用正则表达式实现html转码*/
    function htmlEncodeByRegExp(str) {
        var s = "";
        if (str.length == 0) return "";
        s = str.replace(/&/g, "&");
        s = s.replace(/>/g, ">");
        s = s.replace(/ /g, " ");
        s = s.replace(/\'/g, "'");
        s = s.replace(/\"/g, "\"");
        return s;
    }

    /*用正则表达式实现html解码*/
    function htmlDecodeByRegExp(str) {
        var s = "";
        if (str.length == 0) return "";
        s = str.replace(/&/g, "&");
        s = s.replace(/>/g, ">");
        s = s.replace(/ /g, " ");
        s = s.replace(/'/g, "\'");
        s = s.replace(/"/g, "\"");
        return s;
    }

    var title = "[[${videoInfo.videoTitle}]]";//视频标题
    var url4 = "www.dstation.com";//视频网址
    var desc = $('#vid-description').text();//视频简介
    var summary = "作者：[[${videoInfo.userName}]]";//作者
    var pics = "[[@{/video/getVideoCoverageImg/} + '?videoCoverImg=' + ${videoInfo.videoCoverImg}]]";//图片地址
    //微信分享
    function wxShare() {
        $("#wx-img").empty();
        $("#wx-img").qrcode({
            text: window.location.href, //设置二维码内容
            render: "canvas", //设置渲染方式
            width: 256, //设置宽度,默认生成的二维码大小是 256×256
            height: 256, //设置高度
            typeNumber: -1, //计算模式
            background: "#ffffff", //背景颜色
            foreground: "#000000" //前景颜色
        });
    }

    //QQ空间分享
    function qqZoneShare() {
        if (pics == undefined || pics == null) {
            pics = "http://aladdin-vray.oss-cn-beijing.aliyuncs.com/Other/80de988c-ad11-449b-af48-b5341c957668.jpg";
        }
        var _shareUrl = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?';
        _shareUrl += 'url=' + encodeURIComponent(url4 || window.location.href); //参数url设置分享的内容链接|默认当前页location
        _shareUrl += '&title=' + encodeURIComponent(title || document.title); //参数title设置分享标题，可选参数
        _shareUrl += '&pics=' + encodeURIComponent(pics || ''); //参数pics设置分享图片的路径，多张图片以＂|＂隔开，可选参数
        _shareUrl += '&showcount=' + 0; //参数showcount是否显示分享总数,显示：'1'，不显示：'0'，默认不显示
        _shareUrl += '&desc=' + encodeURIComponent(desc || '你的好友向你分享了一个好看的视频'); //参数desc设置分享的描述，可选参数
        _shareUrl += '&site=' + encodeURIComponent('D站' || ''); //参数site设置分享来源，可选参数
        _shareUrl += '&summary=' + encodeURIComponent(summary || ''); //参数summary设置分享摘要，可选参数
        _shareUrl += '&content=' + 'utf-8'; //参数content设置页面编码gb2312|utf-8，可选参数
        window.open(_shareUrl, 'qZone', '_blank');
    }

    //QQ分享
    function qq() {
        var p = {
            url: url4,
            /*获取URL，可加上来自分享到QQ标识，方便统计*/
            desc: desc,
            /*分享理由(风格应模拟用户对话),支持多分享语随机展现（使用|分隔）*/
            title: title,
            /*分享标题(可选)*/
            summary: summary,
            /*分享描述(可选)*/
            pics: pics,
            /*分享图片(可选)*/
            flash: '',
            /*视频地址(可选)*/
            //commonClient : true, /*客户端嵌入标志*/
            site: 'D站' /*分享来源 (可选) ，如：QQ分享*/
        };

        var s = [];
        for (var i in p) {
            s.push(i + '=' + encodeURIComponent(p[i] || ''));
        }
        var target_url = "http://connect.qq.com/widget/shareqq/iframe_index.html?" + s.join('&');
        window.open(target_url, 'qq',
            'height=300, width=500');
    }

    //新浪微博分享
    function sinaWeiBo(title, url, pic) {
        var contents = desc;
        var params = {
            url: url4,
            title: contents + ' —— 转载自: D站',
            pic: pics || ""
        };
        var s = [];
        for (var i in params) {
            s.push(i + '=' + encodeURIComponent(params[i] || ''));
        }
        if (contents) {
            window.open("http://service.weibo.com/share/share.php?" + s.join('&'));
        }
    }

    //百度贴吧分享
    function shareToTieba(title, url, pic) {
        if (pics == undefined || pics == null) {
            pics = "http://aladdin-vray.oss-cn-beijing.aliyuncs.com/Other/80de988c-ad11-449b-af48-b5341c957668.jpg";
        }
        var contents = desc;
        var params = {
            url: url4,
            title: contents + ' —— 转载自: D站',
            pic: pics || ""
        };
        var s = [];
        for (var i in params) {
            s.push(i + '=' + encodeURIComponent(params[i] || ''));
        }
        if (contents) {
            window.open("http://tieba.baidu.com/f/commit/share/openShareApi?" + s.join('&'));
        }
    }

    /**
     * 点击关注/取消关注
     */
    function notice(id) {
        if($("#noticeButton").attr("class") == "subscribe") {  //原来是关注，现在想要取消关注
            swal({
                title: "确认弹框",
                text: "确定要取消关注吗?",
                icon: "warning",
                buttons: true,
                dangerMode: true,
            }).then((flag) => {
                if(flag) {
                    $.ajax(
                        {
                            type: "POST",
                            url: "/video/noticedUp",
                            async: false,    //异步请求
                            cache: true,
                            data: {
                                "followUserId": id
                            },
                            success: function (data) {
                                // 1. 更新 关注icon 的样式
                                if(data["res"] == "add") {  //说明是关注
                                    $("#noticeButton").attr("class", "subscribe");
                                    $("#noticeButton").text("取消关注");
                                } else {
                                    $("#noticeButton").attr("class", "donate");
                                    $("#noticeButton").text("关注");
                                    swal("已取消关注!", {
                                        buttons: false,
                                        timer: 1000
                                    });
                                }
                            },
                            error: function (data) {
                                swal("Error", "网络错误，请联系管理员！", "error");
                            }
                        }
                    );
                }
            } );
        } else {
            $.ajax(
                {
                    type: "POST",
                    url: "/video/noticedUp",
                    async: false,    //异步请求
                    cache: true,
                    data: {
                        "followUserId": id
                    },
                    success: function (data) {
                        // 1. 更新 关注icon 的样式
                        if(data["res"] == "add") {  //说明是关注
                            $("#noticeButton").attr("class", "subscribe");
                            $("#noticeButton").text("取消关注");
                        } else {
                            $("#noticeButton").attr("class", "donate");
                            $("#noticeButton").text("关注");
                            swal("已取消关注!", {
                                buttons: false,
                                timer: 1000
                            });
                        }
                    },
                    error: function (data) {
                        swal("Error", "网络错误，请联系管理员！", "error");
                    }
                }
            );
        }
    }


    /**
     * 回复评论
     */
    function replyComment(videoId, videoCommentId, userName) {
        $("#replyCommentTitle").text("回复" + userName + ":");
        $("#replyCommentVideoId").val(videoId);
        $("#replyCommentId").val(videoCommentId);
        if($("#replyCommentDiv").attr("hidden") == "hidden")  { //当前是隐藏状态，则让他显示出来,并且输入框清空
            $("#replyCommentDiv").removeAttr("hidden");
            $("#replyCommentTxt").val("");
        } else {    // 当前是显示状态，则让他隐藏起来，并且清空输入框
            $("#replyCommentDiv").attr("hidden", "hidden");
            $("#replyCommentTxt").val("");
        }
    }


    /**
     * 提交回复内容
     */
    function submitReplyComment() {
        var commentTxt = $("#replyCommentTxt").val();
        var videoId =  $("#replyCommentVideoId").val();
        var preCommentId = $("#replyCommentId").val();
        if(trimBlank(commentTxt) === "") {
            swal("Warning", "评论内容不能为空！", "warning");
            return ;
        }
        $.ajax(
            {
            type: "POST",
                url: "/videoComment/publicComment",
                async: false,
                cache: true,
                data: {
                "videoId": videoId,
                    "commentTxt": commentTxt,
                    "preCommentId" :preCommentId
            },
            success: function (data) {
                if(data["saveRes"] == true) {
                    swal("发表成功!", {
                        buttons: false,
                        timer: 1000
                    });
                    //刷新界面
                    window.location.reload();
                } else {
                    swal("Error", "发表评论失败！", "error");
                }
            },
            error: function (data) {
                swal("Error", "网络错误，请联系管理员！", "error");
            }
        });
    }
</script>
</body>
</html>






